<template>
  <div class="approval-process-steps-item">
    <el-tag class="item-tag" :closable="closableFlag" size="large" type="info" @click="handleClickTag" @close="handleCloseTag">{{ showText }}</el-tag>
    <DialogApprovalProcessStepsItem2 ref="dialogApprovalProcessStepsItem" v-model="value" :list-type="listType" />
  </div>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import DialogApprovalProcessStepsItem2 from './DialogApprovalProcessStepsItem2.vue'

const props = defineProps({
  modelValue: {
    type: Object as any,
    default: null,
  },
  selectOptions: {
    type: Array as any,
    default: () => [],
  },
  listType: {
    type: Number,
    default: 0,
  },
  defaultText: {
    type: String,
    default: '',
  },
})
const emit = defineEmits(['update:modelValue', 'close', 'click'])

const value = ref<any>(props.modelValue || null)
const dialogApprovalProcessStepsItem = ref()

const closableFlag = computed(() => {
  let reslut = true
  // if (value.value) {
  //   reslut = !(value.value.id == 113 || value.value.id == 115)
  // } else {
  // }
  // return props.listType === 0 || value.value !== null
  return reslut
})

const handleClickTag = () => {
  if (dialogApprovalProcessStepsItem.value && closableFlag.value) {
    dialogApprovalProcessStepsItem.value.openDialog()
  }
}

/**
 * 关闭标签的函数
 *
 * @returns 无返回值
 */
const handleCloseTag = () => {
  value.value = null
  emit('close')
}

const showText = computed(() => {
  if (value.value) {
    return value.value.text
  } else {
    return `选择${props.defaultText}`
  }
})

watch(
  () => value.value,
  (val) => {
    emit('update:modelValue', val)
  }
)

watch(
  () => props.modelValue,
  (newVal) => {
    value.value = newVal
  }
)
</script>
